<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }

        a {
            color: gray;
        }

        .header {
            width: 100%;
            height: 30px;
            background-color: #eee;
        }

        i,
        em {
            font-style: normal;
        }

        .header .head1 {
            width: 1200px;
            height: 30px;
            font-size: 12px;
            line-height: 30px;
            color: #8c8c8c;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
        }

        .header .head1 .fl {
            width: 183px;
            height: 30px;
            display: flex;
            justify-content: space-between;
        }

        .header .head1 .fl .city {
            width: 72px;
            height: 30px;
            text-indent: 2em;
            position: relative;
            border: 1px solid transparent;
        }

        .header .head1 .fl .city .bai {
            width: 445px;
            height: 238px;
            position: absolute;
            top: 30px;
            left: -1px;
            background-color: white;
            border: 1px solid #d2d2d2;
            display: none;
            z-index: 1;
        }

        .header .head1 .fl .city .zhong {
            width: 72px;
            height: 3px;
            position: absolute;
            bottom: -2px;
            left: 0px;
            display: none;
            background-color: white;
            z-index: 10;
        }

        .header .head1 .fl .city:hover .zhong {
            display: block;
        }

        .header .head1 .fl .city:hover {
            background-color: white;
            cursor: pointer;
            border: 1px solid #d2d2d2;
        }

        .header .head1 .fl .city:hover .bai {
            display: block;
        }

        .header .head1 .fl .city::after {
            content: "";
            width: 20px;
            height: 26px;
            background: url(../预售/images/1.png) no-repeat;
            position: absolute;
            top: 0px;
            left: 3px;
        }

        .header .head1 .fl .info {
            width: 96px;
            height: 30px;
            display: flex;
            justify-content: space-between;
        }

        .header .head1 .fl .info i a {
            color: #f42828;
        }

        .header .head1 .fl .info span a {
            color: #8c8c8c;
        }

        .header .head1 .fl .info span a:hover {
            color: #f42828;
        }

        .header .head1 .spa {
            width: 374px;
            height: 30px;
            display: flex;
            justify-content: space-between;
        }

        .header .head1 .spa .fuo {
            width: 62px;
            height: 30px;
            text-align: center;
            line-height: 30px;
        }

        .header .head1 .spa .fm {
            position: relative;
        }

        .header .head1 .spa .fm::after {
            content: "";
            width: 1px;
            height: 10px;
            background-color: #ccc;
            position: absolute;
            top: 10px;
            left: -5px;
        }

        .header .head1 .spa .fuo:last-child p {
            background: url(../预售/images/2.png) no-repeat;
            width: 14px;
            height: 9px;
            font-size: 16px;
            position: absolute;
            top: 10px;
            right: 2px;
        }

        .header .head1 .spa .fuo a {
            color: #8c8c8c;
        }

        .header .head1 .spa .fuo a:hover {
            color: #f42828;
        }

        .header .head1 .spa .fuo:last-child {
            width: 82px;
            text-align: start;
            text-indent: 1em;
            color: #8c8c8c;
            border: 1px solid transparent;
        }

        .header .head1 .spa .fuo:last-child .xia {
            width: 380px;
            height: 0px;
            position: absolute;
            background-color: #fff;
            top: 30px;
            right: -1px;
            display: flex;
            align-items: center;
            overflow: hidden;
            z-index: 10;
        }

        .header .head1 .spa .fuo:last-child:hover {
            border: 1px solid #d2d2d2;
            background-color: white;
        }

        .header .head1 .spa .fuo:last-child:hover .xia {
            height: 158px;
            border: 1px solid #d2d2d2;
        }

        .header .head1 .spa .fuo:last-child .zx {
            width: 82px;
            height: 1px;
            position: absolute;
            bottom: -1px;
            left: 0px;
            display: none;
            background-color: white;
            z-index: 99;
        }

        .header .head1 .spa .fuo:last-child:hover .zx {
            display: block;
        }

        .header .head1 .spa .fuo:last-child .xia .mian {
            width: 380px;
            height: 120px;
            display: flex;
            justify-content: space-between;
        }

        .header .head1 .spa .fuo:last-child .xia .mian .zu {
            width: 116px;
            height: 120px;
            border-right: 1px solid #efefef;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .header .head1 .spa .fuo:last-child .xia .mian .zu .tes {
            width: 85px;
            height: 30px;
        }

        .header .head1 .spa .fuo:last-child .xia .mian .zu .tes:first-child {
            font-weight: 700;
            color: #666;
        }

        .header .head1 .spa .fuo:last-child .xia .mian span:hover {
            color: #f42828;
            cursor: pointer;
        }

        .header .head1 .spa .fuo:last-child .xia .mian .yu {
            width: 225px;
            height: 120px;
            margin-right: 18px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .header .head1 .spa .fuo:last-child .xia .mian .yu .youh {
            width: 225px;
            height: 30px;
            line-height: 30px;
            display: flex;
        }

        .header .head1 .spa .fuo:last-child .xia .mian .yu .youh span {
            width: 75px;
            height: 30px;
        }

        .header .head1 .spa .fuo:last-child .xia .mian .yu .youh:first-child {
            font-weight: 700;
            color: #666;
        }

































        header {
            width: 100%;
            height: 100px;
            padding-bottom: 10px;
            background-color: #fff;
        }

        header .header1 {
            width: 1200px;
            height: 100px;
            margin: 0 auto;
            position: relative;
        }

        header .header1 .logo {
            width: 189px;
            height: 57px;
            padding: 21.5px 0px;
            float: left;
        }

        header .header1 .logo .logo1 {
            width: 159px;
            height: 57px;
        }

        header .header1 .inp {
            width: 546px;
            height: 64px;
            float: left;
            margin: 30px 0 0 78px;
            position: relative;
        }

        header .header1 .inp .inp1 {
            width: 546px;
            height: 34px;
        }

        header .header1 .inp .inp1 input {
            font-size: 12px;
            width: 394px;
            height: 30px;
            border: 2px solid #f42424;
            outline: 0;
            text-indent: 1em;
            float: left;
        }

        header .header1 .inp .inp1 button {
            width: 70px;
            height: 34px;
            line-height: 34px;
            background-color: #f42424;
            color: #fff;
            font-size: 14px;
            cursor: pointer;
            text-align: center;
            border: 0;
            float: left;
        }

        header .header1 .inp .inp1 button:nth-child(3) {
            margin-left: 8px;
            background-color: #b31919;
        }

        header .header1 .inp ul {
            width: 546px;
            height: 30px;
        }

        header .header1 .inp ul li {
            float: left;
            height: 28px;
            line-height: 28px;
            margin-right: 10px;
            font-size: 12px;
        }

        header .header1 .inp ul li a {
            color: #999;
        }

        header .header1 .inp ul li a:hover {
            color: #e23435;
        }

        header .header1 .inp2 {
            width: 180px;
            height: 35px;
            margin-top: 30px;
            float: right;
            position: relative;
        }

        header .header1 .inp2 div:nth-child(1) {
            width: 178px;
            height: 33px;
            line-height: 33px;
            position: relative;
            border: 1px solid #d2d2d2;
            font-size: 12px;
        }

        header .header1 .inp2 div:nth-child(1) a {
            display: block;
            color: #f42424;
        }

        header .header1 .inp2 div:nth-child(1) a i {
            width: 20px;
            height: 22px;
            margin-top: 5.5px;
            margin-left: 30px;
            font-size: 20px;
            float: left;
            display: inline;
            background: url(../预售/images/购物车.png) no-repeat 0 0;
            background-size: contain;
        }

        header .header1 .inp2 div:nth-child(1) a span {
            margin-left: 8px;
        }

        header .header1 .inp2 div:nth-child(1) a em {
            width: 13px;
            height: 13px;
            line-height: 13px;
            padding: 1px;
            border-radius: 50%;
            background: #f42424;
            color: #fff;
            position: absolute;
            top: 6px;
            left: 122px;
            text-align: center;
            font-size: 12px;
        }


        header .header1 .inp2 div:nth-child(2) {
            width: 256px;
            height: 68px;
            background-color: red;
            border: 1px solid #d2d2d2;
            padding: 20px 20px 20px 36px;
            background-color: #fff;
            position: absolute;
            right: 0;
            top: 35px;
            z-index: 1;
            display: none;
        }

        header .header1 .inp2 div:nth-child(2) b {
            width: 110px;
            height: 68px;
            background: url(../预售/images/cart-nogoods.png) no-repeat;
            display: block;
            float: left;
        }

        header .header1 .inp2 div:nth-child(2) p {
            width: 178px;
            height: 2px;
            background-color: #fff;
            position: absolute;
            top: -2px;
            left: 134px;
        }

        header .header1 .inp2 div:nth-child(2) span {
            float: left;
            display: block;
            font-size: 12px;
            color: #8c8c8c;
            margin: 6px 0 0 14px;
            line-height: 25px;
            width: 132px;
        }

        header .header1 .inp2:hover .block {
            display: block;
        }
















        .box5 {
            width: 100%;
            height: 40px;
            border-bottom: 2px solid orangered;
        }

        .box6 {
            width: 1200px;
            height: 40px;
            margin: 0 auto;

        }

        .x6a {
            width: 180px;
            height: 40px;
            background-color: red;
            float: left;
            color: #fff;
            font-size: 18px;
            font-weight: 800;
            text-align: center;
            line-height: 40px;
        }

        .box6>ul {
            width: 900px;
            height: 40px;
            display: inline-block;
        }

        .box6>ul>li {
            margin-left: 30px;
            float: left;
            line-height: 40px;
            font-size: 16px;
        }

        .box6>ul>li:nth-child(5) {
            color: orangered;
        }

        #gai {
            color: orangered;
        }









        .box7 {
            width: 100%;
            height: 280px;
        }

        .box8 {
            width: 1200px;
            height: 280px;
            margin: 0 auto;
            background-image: url(./images/juhuasuan/7a.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .box8>ul {
            width: 180px;
            height: 280px;
            background-color: black;
            opacity: 1;
        }

        .box8>ul>li {
            width: 180px;
            height: 39px;
            border-bottom: 1px solid rgb(139, 139, 139);
            color: #fff;
            text-align: center;
            line-height: 39px;
        }

        .box8>ul>li img {
            width: 16px;
            height: 16px;
            vertical-align: middle;
            margin-right: 15px;
        }

        .box8 li:hover {
            background-color: red;
        }

        .box9 {
            width: 100%;
            height: 142px;
            background-color: rgb(241, 241, 241);
            display: flex;
            align-items: center;
        }

        .box10 {
            width: 1200px;
            height: 42px;
            margin: 0 auto;
        }

        .box10>div {
            width: 32px;
            height: 32px;
            background-image: url(./images/juhuasuan/crazy-icon.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            float: left;
        }

        .box11 {
            width: 100%;
            height: 142px;
            margin-bottom: 100px;

        }

        .box12 {
            width: 1200px;
            height: 142px;
            margin: 0 auto;

        }

        .box12 h2 {
            width: 1200px;
            height: 42px;
            margin-bottom: 15px;
            margin-top: 40px;
        }

        .box12 div {
            width: 1200px;
            height: 42px;
            text-align: center;
            line-height: 42px;
            border: 1px solid gray;
        }


        footer {
            width: 100%;
            height: 444px;
            background-color: #eee;
            margin-top: 80px;
        }

        footer .foot1 {
            width: 1200px;
            height: 32px;
            padding: 24px 0px;
            margin: 0 auto;
        }

        footer .foot1 .left {
            width: 900px;
            height: 32px;
            float: left;
        }

        footer .foot1 .left>div {
            float: left;
            width: 170px;
            height: 32px;
            line-height: 30px;
            overflow: hidden;
            padding-right: 10px;
        }

        footer .foot1 .left>div i {
            display: inline;
            width: 32px;
            height: 32px;
            background: url(../预售/images/footer_new_icon.png) no-repeat 0 0;
            float: left;
        }

        footer .foot1 .left>div:nth-child(2) i {
            background-position: -34px 0;
        }

        footer .foot1 .left>div:nth-child(3) i {
            background-position: -68px 0;
        }

        footer .foot1 .left>div:nth-child(4) i {
            background-position: -102px 0;
        }

        footer .foot1 .left>div:nth-child(5) i {
            background-position: -136px 0;
        }




        footer .foot1 .left>div span {
            width: 125px;
            height: 32px;
            overflow: hidden;
            float: left;
            font-size: 18px;
            color: #888888;
            margin-left: 12px;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        footer .foot1 .right {
            width: 289px;
            height: 32px;
            float: right;
            overflow: hidden;
        }

        footer .foot1 .right div:nth-child(1) {
            width: 160px;
            height: 32px;
            line-height: 30px;
            float: left;
        }

        footer .foot1 .right div:nth-child(1) i {
            width: 22px;
            height: 24px;
            float: left;
            margin-top: 5px;
            background: url(../预售/images/footer_new_icon.png) no-repeat -3px -103px;
            display: inline;
        }

        footer .foot1 .right div:nth-child(1) span {
            width: 130px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            height: 30px;
            float: left;
            color: #262626;
            font-size: 16px;
            font-weight: bold;
            margin-left: 8px;
        }


        footer .foot1 .right div:nth-child(2) {
            width: 115px;
            float: left;
            height: 32px;
            line-height: 30px;
        }

        footer .foot1 .right div:nth-child(2) a {
            display: block;
            width: 115px;
            height: 32px;
        }

        footer .foot1 .right div:nth-child(2) a i {
            width: 27px;
            height: 24px;
            float: left;
            margin-top: 4px;
            background: url(../预售/images/footer_new_icon.png) no-repeat -3px -138px;
            display: inline;
            cursor: pointer;
        }

        footer .foot1 .right div:nth-child(2) a span {
            width: 80px;
            height: 30px;
            float: left;
            color: #262626;
            font-size: 16px;
            font-weight: bold;
            margin-left: 8px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            cursor: pointer;
        }


        footer .foot2 {
            width: 100%;
            height: 189px;
            background-color: #262626;
        }

        footer .foot2 .wrap {
            width: 1200px;
            height: 128px;
            padding: 30px 0;
            margin: 0 auto;
            border-bottom: 1px solid #464646;
            overflow: hidden;
        }

        footer .foot2 .wrap .wrap1 {
            width: 900px;
            height: 128px;
            float: left;
        }

        footer .foot2 .wrap .wrap1>div {
            float: left;
            width: 170px;
            padding-right: 10px;
            height: 128px;
        }

        footer .foot2 .wrap .wrap1>div h3 {
            width: 170px;
            height: 24px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 16px;
            font-weight: bold;
            color: #fff;
            margin-bottom: 20px;
        }

        footer .foot2 .wrap .wrap1>div ul {
            width: 170px;
            height: 84px;
        }

        footer .foot2 .wrap .wrap1>div ul li {
            width: 170px;
            height: 28px;
            line-height: 28px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        footer .foot2 .wrap .wrap1>div ul li a {
            font-size: 14px;
            color: #cccccc;
            width: 100%;
        }

        footer .foot2 .wrap .wrap1>div ul li a:hover {
            color: #f42424;
        }

        footer .foot2 .wrap .wrap2 {
            width: 276px;
            height: 128px;
            float: right;
        }

        footer .foot2 .wrap .wrap2>div {
            float: left;
            width: 104px;
            height: 124px;
            padding: 2px;
            background-color: #fff;
            margin-right: 60px;
        }

        footer .foot2 .wrap .wrap2>div:nth-child(2) {
            margin-right: 0;
        }

        footer .foot2 .wrap .wrap2>div>div:nth-child(1) {
            width: 104px;
            height: 104px;
        }

        footer .foot2 .wrap .wrap2>div>div:nth-child(1) img {
            width: 100%;
            height: 100%;
        }

        footer .foot2 .wrap .wrap2>div>div:nth-child(2) {
            width: 100%;
            height: 20px;
            line-height: 20px;
            background-color: #121212;
            text-align: center;
            color: #fff;
            font-size: 12px;
        }


        footer .foot3 {
            width: 100%;
            height: 125px;
            padding: 30px 0 20px;
            background-color: #262626;
        }

        footer .foot3 .but {
            width: 1200px;
            height: 125px;
            margin: 0 auto;
        }

        footer .foot3 .but p {
            width: 1200px;
            height: 18px;
            margin-bottom: 10px;
            text-align: center;
            color: #4c4c4c;
        }

        footer .foot3 .but p a {
            color: #888;
            display: inline-block;
            font-size: 12px;
        }

        footer .foot3 .but p a:hover {
            color: #f42424;
        }

        footer .foot3 .but p:nth-child(1) span,
        footer .foot3 .but p:nth-child(2) span {
            overflow: hidden;
            margin: 0 17px;
            width: 1px;
            height: 11px;
            background-color: #444;
            display: inline-block;
        }

        footer .foot3 .but p:nth-child(3),
        footer .foot3 .but p:nth-child(4) {
            margin-bottom: 0;
            text-align: center;
            color: #4c4c4c;
            font-size: 12px;
        }

        footer .foot3 .but p:nth-child(3) a,
        footer .foot3 .but p:nth-child(4) a {
            color: #555;
        }

        footer .foot3 .but p:nth-child(3) a:hover,
        footer .foot3 .but p:nth-child(4) a:hover {
            color: #f42424;
        }


























        .pb {
            width: 380px;
            height: 485px;
            background-color: rgba(0, 0, 0, .1);
            padding: 8px;
            position: fixed;
            top: 190px;
            left: 753px;
            display: none;
        }

        .pb>div {
            width: 380px;
            height: 485px;
            background-color: #fff;
        }

        .pb>div .pb-hd {
            position: relative;
            padding: 0 16px;
            height: 31px;
            line-height: 31px;
            background: #f3f3f3;
        }

        .pb>div .pb-hd i {
            cursor: pointer;
            display: block;
            position: absolute;
            z-index: 100000;
            top: 10px;
            right: 16px;
            overflow: hidden;
            width: 13px;
            height: 13px;
            background: url(../预售/images/dialog.png) no-repeat;
            font-size: 0;
            text-indent: -99999px;
        }

        .pb>div .pb-hd span {
            font-weight: normal;
            font-size: 14px;
            color: #666;
        }

        .pb>div .pb-bd {
            width: 360px;
            height: 434px;
            padding: 10px;
            overflow: auto;
            background: #fff;
            position: relative;
        }

        .pb>div .pb-bd>div:nth-child(1) {
            width: 270px;
            height: 71px;
            padding: 20px 40px 0;
        }

        .pb>div .pb-bd>div:nth-child(1)>div:nth-child(1) {
            height: 20px;
            line-height: 20px;
            text-align: center;
            position: relative;
        }

        .pb>div .pb-bd>div:nth-child(1)>div:nth-child(1) h3 {
            font-size: 16px;
            color: #8c8c8c;
            padding: 0 15px;
            display: inline-block;
            position: relative;
            z-index: 2;
            background-color: #fff;
            font-weight: normal;
        }

        .pb>div .pb-bd>div:nth-child(1)>div:nth-child(1) span {
            position: absolute;
            z-index: 1;
            left: 0;
            right: 0;
            top: 9px;
            height: 1px;
            border-bottom: 1px dashed #e5e5e5;
        }

        .pb>div .pb-bd>div:nth-child(1) .qq {
            width: 270px;
            height: 36px;
            margin-top: 15px;
        }

        .pb>div .pb-bd>div:nth-child(1) .qq i {
            display: block;
            width: 36px;
            height: 36px;
            background: url(../预售/images/login-icon.png) no-repeat;
            background-position: 0 0;
            margin: 0 auto;
        }

        .pb>div .pb-bd>div:nth-child(2) {
            width: 270px;
            height: 298px;
            padding: 15px 40px 30px;
        }

        .pb>div .pb-bd>div:nth-child(2)>div:nth-child(1) {
            width: 270px;
            height: 20px;
            padding-bottom: 5px;
            line-height: 20px;
            text-align: center;
            position: relative;
        }

        .pb>div .pb-bd>div:nth-child(2)>div:nth-child(1) h3 {
            font-size: 16px;
            color: #8c8c8c;
            padding: 0 15px;
            display: inline-block;
            position: relative;
            z-index: 2;
            background-color: #fff;
        }

        .pb>div .pb-bd>div:nth-child(2)>div:nth-child(1) span {
            position: absolute;
            z-index: 1;
            left: 0;
            right: 0;
            top: 9px;
            height: 1px;
            border-bottom: 1px dashed #e5e5e5;
        }

        .pb>div .pb-bd>div:nth-child(2) .form {
            width: 270px;
            height: 248px;
            margin-top: 25px;
        }

        .pb>div .pb-bd>div:nth-child(2) .form .item {
            position: relative;
            width: 268px;
            height: 38px;
            line-height: 38px;
            border: 1px solid #d2d2d2;
            margin-bottom: 10px;
        }

        .pb>div .pb-bd>div:nth-child(2) .form .item input {
            width: 223px;
            height: 27px;
            padding: 5px 10px 5px 35px;
            border: 0;
            outline: 0;
            position: relative;
            top: -1px;
            left: 0px;
        }

        .pb>div .pb-bd>div:nth-child(2) .form .item i {
            width: 18px;
            height: 18px;
            line-height: 18px;
            color: #e8e8e8;
            font-size: 18px;
            position: absolute;
            left: 10px;
            top: 10px;
            background: url(../预售/images/用户名.png) no-repeat 0 0;
            background-size: contain;
            z-index: 1;
        }

        .pb>div .pb-bd>div:nth-child(2) .form .item:nth-child(2) i {
            background: url(../预售/images/密码.png) no-repeat 0 0;
            background-size: contain;
        }

        .pb>div .pb-bd>div:nth-child(2) .form .item:nth-child(3) i {
            background: url(../预售/images/验证码.png) no-repeat 0 0;
            background-size: contain;
        }

        .pb>div .pb-bd>div:nth-child(2) .form .item:nth-child(3) input {
            width: 111px;
        }

        .pb>div .pb-bd>div:nth-child(2) .form .item:nth-child(3) img {
            position: absolute;
            top: 0px;
        }

        .pb>div .pb-bd>div:nth-child(2) .form .botton {
            width: 270px;
            height: 25px;
        }

        .pb>div .pb-bd>div:nth-child(2) .form .botton label {
            padding-left: 18px;
            background: url(../预售/images/checkbox_12x12.png) 0 2px no-repeat;
            font-size: 12px;
        }

        .pb>div .pb-bd>div:nth-child(2) .form .botton label:hover {
            background: url(../预售/images/checkbox_cur_12x12.png) 0 2px no-repeat;
            cursor: pointer;
            color: #f42424;
        }

        .pb>div .pb-bd>div:nth-child(2) .form button {
            width: 270px;
            height: 40px;
            margin: 10px 0px 0px;
            background-color: red;
            border-radius: 3px;
            outline: 0;
            border: 0;
            font-size: 16px;
            font-weight: bold;
            text-align: center;
            line-height: 40px;
            color: #fff;
        }

        .pb>div .pb-bd>div:nth-child(2) .form button:hover {
            opacity: 0.7;
        }


        .pb>div .pb-bd>div:nth-child(2) .form .lie {
            margin-top: 5px;
            width: 270px;
            height: 18px;
        }

        .pb>div .pb-bd>div:nth-child(2) .form .lie a {
            display: block;
            margin-top: 0;
            color: #8c8c8c;
            float: left;
            font-size: 12px;
        }

        .pb>div .pb-bd>div:nth-child(2) .form .lie a:hover {
            color: #f42424;
        }

        .pb>div .pb-bd>div:nth-child(2) .form .lie a:nth-child(2) {
            float: right;
            color: #f42828;
        }

        .pb>div .pb-bd>div:nth-child(2) .form .lie a:nth-child(2):hover {
            text-decoration: underline;
        }






        .side {
            width: 40px;
            height: 100%;
            background: #000;
            z-index: 2;
            top: 0;
            right: 0;
            position: fixed;
        }

        .bigside {
            width: 40px;
            height: 100%;
            position: relative;
        }

        .side-top {
            position: absolute;
            top: 40%;
            left: 0;
            margin-top: -190px;
            margin-top: -220px;
            background: #000;
            z-index: 2;
            width: 40px;
        }

        .side-top ul {
            width: 40px;
            height: 469px;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        .side-top ul li {
            width: 40px;
            position: relative;
            margin-top: 10px;
        }

        .side-top ul>div {
            width: 40px;
            position: relative;
            margin-top: 10px;
        }

        .side-top ul li a i {
            display: inline-block;
            background: url(../grmz/images/grmz/ibar_sprites.png) no-repeat;
            height: 19px;
            width: 18px;
            vertical-align: top;
            position: absolute;
        }

        .side-top ul>div a i {
            display: inline-block;
            background: url(../grmz/images/grmz/ibar_sprites.png) no-repeat;
            height: 19px;
            width: 18px;
            vertical-align: top;
            position: absolute;
        }

        .side-top ul>div i {
            background-position: 0 0;
            width: 18px;
            height: 19px;
            top: 10px;
            left: 11px;
        }

        .side-top ul>div:hover .login {
            display: block;
        }


        /*  */

        .side-top ul li:nth-child(2) {
            width: 40px;
            height: 130px;
        }

        .side-top ul li:nth-child(2) i {
            background-position: 2px -29px;
            width: 23px;
            height: 18px;
            top: 19px;
            left: 9px;
        }

        .side-top ul li:nth-child(3) {
            margin-top: -10px;
        }

        .side-top ul li:nth-child(3) i {
            background: url(../grmz/images/grmz/chongzhi.png) no-repeat;
            width: 35px;
            height: 35px;
            top: 2px;
            left: 2px;
        }

        .side-top ul li:nth-child(4) i {
            width: 18px;
            height: 13px;
            background-position: -36px 0;
            top: 12px;
            left: 11px;
        }

        .side-top ul li:nth-child(5) i {
            width: 18px;
            height: 18px;
            background-position: 0 -57px;
            top: 10px;
            left: 11px;
        }

        .side-top ul li:nth-child(6) i {
            width: 18px;
            height: 24px;
            background-position: -1px -110px;
            top: 8px;
            left: 12px;
        }

        .side-top ul li:nth-child(7) i {
            background: url(../grmz/images/grmz/wdsc.png) no-repeat;
            width: 35px;
            height: 35px;
            top: 2px;
            left: 3px;
        }

        .side-top ul li:nth-child(8) i {
            background: url(../grmz/images/grmz/email.png) no-repeat;
            width: 35px;
            height: 35px;
            top: 1px;
            left: 3px;
        }

        .side-top ul li .car {
            font-size: 12px;
            width: 16px;
            display: block;
            height: 48px;
            margin: 13px 0 -9px 13px;
            padding-top: 35px;
        }

        .side-top .side-num {
            font-size: 12px;
            width: 21px;
            height: 21px;
            display: block;
            border-radius: 50%;
            background: #f42424;
            text-align: center;
            line-height: 21px;
            margin: 15px 0 0 10px;
            color: #fff;
        }

        .cart_list {
            width: 40px;
            background: url(../grmz/images/grmz/ibar_sprites.png) no-repeat;
            line-height: 16px;
            height: 133px;
            background-position: -23px -225px;
            color: #fff;
            display: block;
            position: absolute;
        }

        .side-buttom {
            width: 40px;
            height: 38px;
            /* bottom: 11px; */
            bottom: 60px;
            position: absolute;
        }

        .side-buttom .ke {
            background: url(../grmz/images/grmz/ibar_sprites.png) no-repeat;
            width: 18px;
            height: 18px;
            background-position: -1px -174px;
            display: inline-block;
            margin: 10px 0 0 10px;
            vertical-align: top;
        }

        .bigside ul li:hover {
            background: #f42424;
        }

        .bigside ul li:hover .side-num {
            background-color: #fff;
            color: #f42424;
        }

        .side-buttom:hover {
            background: #f42424;
        }

        .dingdan,
        .side-buttom #center {
            height: 38px;
            line-height: 38px;
            width: 92px;
            position: absolute;
            z-index: 2;
            left: -121px;
            top: 3px;
            background: #000;
            color: #d8d8d8;
            text-align: center;
            visibility: hidden;
            transition: all 0.3s;
        }

        .bigside .hdingbu {
            height: 38px;
            line-height: 38px;
            width: 40px;
            position: absolute;
            bottom: 15px;
            left: 0;
            background: #000;
            color: #d8d8d8;
            text-align: center;
            transition: all 0.3s;
            font-size: 13px;
        }

        .hdingbu:hover {
            background: red;
        }

        .side-top .dingdan .icon-arrow {
            position: absolute;
            left: 92px;
            top: 15px;
        }

        .side-buttom #center .icon-arrow,
        .side-top .dingdan .icon-arrow {
            background: url(../grmz/images/grmz/ibar_sprites.png) no-repeat;
            position: absolute;
            right: -5px;
            top: 15px;
            width: 5px;
            height: 9px;
            background-position: 0 -234px;
            overflow: hidden;
            display: inline-block;
            vertical-align: top;
        }

        .side-top .login {
            display: none;
            z-index: 3;
            position: absolute;
            top: 0px;
            left: -287px;
            width: 267px;
            height: 185px;
            padding: 10px;
            background: #fff;
            box-shadow: 0 0 5px rgba(0, 0, 0, .4);
            border-radius: 5px 0 0 5px;
        }

        .login-top {
            height: 120px;
            border-bottom: 1px dotted #d5d5d5;
        }

        .login-top img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            display: block;
            float: left;
        }

        .login-top>div {
            width: 140px;
            height: 98px;
            float: left;
            padding-top: 30px;
            line-height: 24px;
            margin-left: 20px;
        }

        .login .login-top div p {
            width: 140px;
            font-size: 12px;
        }

        .login .login-buttom a:hover {
            background-color: #fff;
            border: 1px solid red;
        }

        .login-buttom {
            width: 267px;
            height: 79px;
            overflow: hidden;
            padding-top: 15px;
            clear: both;
            padding-left: 30px;
        }

        .login-buttom a {
            font-size: 12px;
            width: 96px;
            height: 32px;
            line-height: 32px;
            text-align: center;
            border: 1px solid #e9e9e9;
            color: #333;
            float: left;
            background-color: #fbfbfb;
            margin-right: 15px;
        }

        .side-top .login .icon-white {
            display: inline-block;
            background: url(../grmz/images/grmz/ibar_sprites.png) no-repeat;
            position: absolute;
            left: 287px;
            top: 15px;
            width: 5px;
            height: 9px;
            background-position: 0 -253px;
        }
    </style>
    <script src="../预售/js/jquery-3.6.0.js"></script>
</head>

<body>
    <div class="header">
        <div class="head1">
            <div class="fl">
                <div class="city">郑州市
                    <div class="zhong"></div>
                    <div class="bai"></div>
                </div>
                <div class="info">
                    <i><a href="../登录注册/index.html">请登录</a></i>
                    <span><a href="../登录注册/index1.html">免费注册</a></span>
                </div>
            </div>
            <div class="spa">
                <div class="fuo"><a href="#">我的订单</a></div>
                <div class="fuo fm"><a href="#">我的浏览</a></div>
                <div class="fuo fm"><a href="#">我的收藏</a></div>
                <div class="fuo fm"><a href="#">客户服务</a></div>
                <div class="fuo fm"><a href="#">网站导航</a>
                    <p></p>
                    <div class="zx"></div>
                    <div class="xia">
                        <div class="mian">
                            <div class="zu">
                                <div class="tes">特色主题</div>
                                <div class="tes"><span>家用电器</span></div>
                                <div class="tes"><span>男装女装</span></div>
                                <div class="tes"><span>鞋靴箱包</span></div>
                            </div>
                            <div class="yu">
                                <div class="youh">促销活动</div>
                                <div class="youh">
                                    <span>拍卖活动</span>
                                    <span>共创商品</span>
                                    <span>积分商城</span>
                                </div>
                                <div class="youh">
                                    <span>CMS频道</span>
                                    <span>优惠活动</span>
                                    <span>超值礼包</span>
                                </div>
                                <div class="youh">
                                    <span>优惠券</span>
                                    <span>礼品卡</span>
                                    <span>预售商品</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>








    <header>
        <div class="header1">
            <div class="logo">
                <img src="../预售/images/shop_logo.gif" alt="">
            </div>
            <div class="inp">
                <div class="inp1">
                    <input type="text" placeholder="周大福">
                    <button>搜商品</button>
                    <button>搜店铺</button>
                </div>
                <ul>
                    <li><a href="#">周大福</a></li>
                    <li><a href="#">内衣</a></li>
                    <li><a href="#">Five Plus</a></li>
                    <li><a href="#">手机</a></li>
                </ul>
            </div>
            <div class="inp2">
                <div>
                    <a href="#">
                        <i></i>
                        <span>我的购物车</span>
                        <em>0</em>
                    </a>
                </div>
                <div class="block">
                    <p></p>
                    <b></b>
                    <span>购物车中还没有商品，赶紧选购吧！</span>
                </div>
            </div>




        </div>
    </header>











    <div class="box5">
        <div class="box6">
            <div class="x6a">
                <span>团购商品</span>
            </div>
            <ul>
                <li><a href="../首页/index.html">首页</a></li>
                <li><a href="../grmz/grmz.html">个护美妆</a></li>
                <li><a href="../fuzhaung/fuzhaung.html">服装城</a></li>
                <li><a href="../jiayong/jiayong.html">家用电器</a></li>
                <li><a href="../juhuasuan/鞋靴箱包.html">鞋靴箱包</a></li>
                <li><a href="../juhuasuan/聚划算.html" id="gai">聚划算</a></li>
                <li><a href="../预售/预售首页.html">预售</a></li>
                <li><a href="../dianpujie/dianpujie.html">店铺街</a></li>
                <li><a href="../dianpujie/pinpai.html">品牌专区</a></li>
                <li><a href="../公告/公告.html">公告</a></li>
            </ul>
        </div>
    </div>















    <div class="box7">
        <div class="box8">
            <ul>
                <li><img src="./images/juhuasuan/8b.svg" alt=""> 家用电器</li>
                <li><img src="./images/juhuasuan/8a.svg" alt="">男装女装</li>
                <li> <img src="./images/juhuasuan/8c.svg" alt=""> 鞋靴箱包</li>
                <li><img src="./images/juhuasuan/8d.svg" alt=""> 手机数码</li>
                <li><img src="./images/juhuasuan/8e.svg" alt=""> 电脑办公</li>
                <li><img src="./images/juhuasuan/8f.svg" alt=""> 家居家纺</li>
                <li><img src="./images/juhuasuan/8f.svg" alt=""> 个人化妆</li>
            </ul>
        </div>
    </div>

    <div class="box9">
        <div class="box10">
            <div></div>
            <h2>疯狂团购</h2>
        </div>
    </div>

    <div class="box11">
        <div class="box12">
            <h2>热门团购</h2>
            <a href="#">
                <div>全部团购</div>
            </a>
        </div>
    </div>

    <footer>
        <div class="foot1">
            <div class="left">
                <div>
                    <i class="f-icon f-icon-qi"></i>
                    <span>七天包换</span>
                </div>
                <div>
                    <i class="f-icon f-icon-zheng"></i>
                    <span>正品保障</span>
                </div>
                <div>
                    <i class="f-icon f-icon-hao"></i>
                    <span>好评如潮</span>
                </div>
                <div>
                    <i class="f-icon f-icon-shan"></i>
                    <span>闪电发货</span>
                </div>
                <div>
                    <i class="f-icon f-icon-quan"></i>
                    <span>权威荣誉</span>
                </div>
            </div>
            <div class="right">
                <div>
                    <i class="f-icon f-icon-tel"></i><span>4001-021-758</span>
                </div>
                <div class="abc">
                    <a>
                        <i></i><span>咨询客服</span>
                    </a>
                </div>
            </div>
        </div>





        <div class="foot2">
            <div class="wrap">
                <div class="wrap1">
                    <div>
                        <h3>新手上路 </h3>
                        <ul>
                            <li><a href="#" title="售后流程">售后流程</a></li>
                            <li><a href="#" title="购物流程">购物流程</a></li>
                            <li><a href="#" title="订购方式">订购方式</a></li>
                        </ul>
                    </div>
                    <div>
                        <h3>配送与支付 </h3>
                        <ul>
                            <li><a href="#" title="货到付款区域">货到付款区域</a></li>
                            <li><a href="#" title="配送支付智能查询">配送支付智能查询</a></li>
                            <li><a href="#" title="支付方式说明">支付方式说明</a></li>
                        </ul>
                    </div>
                    <div>
                        <h3>服务保证 </h3>
                        <ul>
                            <li><a href="#" title="退换货原则">退换货原则</a></li>
                            <li><a href="#" title="售后服务保证">售后服务保证</a></li>
                            <li><a href="#" title="产品质量保证">产品质量保证</a></li>
                        </ul>
                    </div>
                    <div>
                        <h3>联系我们 </h3>
                        <ul>
                            <li><a href="#" title="网站故障报告">网站故障报告</a></li>
                            <li><a href="#" title="选机咨询 ">选机咨询</a>
                            </li>
                            <li><a href="#" title="投诉与建议 ">投诉与建议</a></li>
                        </ul>
                    </div>
                    <div>
                        <h3>会员中心</h3>
                        <ul>
                            <li><a href="#" title="资金管理">资金管理</a></li>
                            <li><a href="#" title="我的收藏">我的收藏</a></li>
                            <li><a href="#" title="我的订单">我的订单</a></li>
                        </ul>
                    </div>
                </div>
                <div class="wrap2">
                    <div>
                        <div>
                            <img src="../预售/images/ecjia_qrcode.jpg" alt="">
                        </div>
                        <div>关注微信</div>
                    </div>
                    <div>
                        <div>
                            <img src="../预售/images/ectouch_qrcode.jpg" alt="">
                        </div>
                        <div>下载APP</div>
                    </div>
                </div>
            </div>
        </div>




        <div class="foot3">
            <div class="but">
                <p>
                    <a href="../首页/index.html">首页</a>
                    <span class="spacer"></span>
                    <a href="#">隐私保护</a>
                    <span class="spacer"></span>
                    <a href="#">联系我们</a>
                    <span class="spacer"></span>
                    <a href="#">免责条款</a>
                    <span class="spacer"></span>
                    <a href="#">公司简介</a>
                    <span class="spacer"></span>
                    <a href="#">商家入驻</a>
                    <span class="spacer"></span>
                    <a href="#">供应商入驻</a>
                    <span class="spacer"></span>
                    <a href="#">意见反馈</a>
                </p>


                <p>
                    <a href="#" title="b2b2c">b2b2c</a>
                    <span class="spacer"></span>
                    <a href="#" title="多用户商城系统">多用户商城系统</a>
                    <span class="spacer"></span>
                    <a href="#" title="商城系统">商城系统</a>
                    <span class="spacer"></span>
                    <a href="#" title="ecjia新零售">ecjia新零售</a>
                </p>


                <p>
                    <span>ICP备案证书号:</span><a href="#">沪ICP备14029880号-5</a>
                </p>

                <p><a href="#">版权所有 © 2005-2021 大商创，并保留所有权利。POWERED BY DSCMALL</a>
                </p>
            </div>
        </div>
    </footer>













    <div class="pb">
        <div>
            <div class="pb-hd">
                <i>✕</i>
                <span>您尚未登录！</span>
            </div>

            <div class="pb-bd">

                <div>
                    <div>
                        <h3>用第三方账号直接登录</h3><span></span>
                    </div>
                    <div class="qq">
                        <i></i>
                    </div>
                </div>

                <div>
                    <div>
                        <h3>账号登录</h3><span></span>
                    </div>
                    <div class="form">
                        <div class="item">
                            <i></i>
                            <input type="text" placeholder="用户名/邮箱/手机">
                        </div>
                        <div class="item">
                            <i></i>
                            <input type="password" placeholder="密码">
                        </div>
                        <div class="item">
                            <i></i>
                            <input type="text" placeholder="验证码">
                            <img src="./images/验证码2.png" alt="">
                        </div>
                        <div class="botton">
                            <label>请保存我这次的登录信息。</label>
                        </div>
                        <button>登 录</button>
                        <div class="lie">
                            <a href="#">忘记密码？</a>
                            <a href="../登录注册/index1.html">免费注册</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="side">
        <div class="bigside">
            <div class="side-top">
                <ul class="side-oul">
                    <div>
                        <a href="#"><i></i></a>
                        <div class="login">
                            <div class="login-top">
                                <img src="./images/grmz/touxiang.jpg" alt="">
                                <div>
                                    <p>用户名：暂无</p>
                                    <p>级 别：暂无</p>
                                </div>
                            </div>
                            <div class="login-buttom">
                                <div><a href="#">我的订单</a></div>
                                <div><a href="#">我的收藏</a></div>
                            </div>
                            <i class="icon-white"></i>
                        </div>
                    </div>
                    <li>
                        <a href="#" class="cart_list">
                            <i></i><span class="car">购物车</span><span class="side-num">0</span></a>
                    </li>
                    <li><a href="#"><i></i></a>
                        <div class="dingdan">我的订单<i class="icon-arrow"></i></div>
                    </li>
                    <li><a href="#"><i></i></a>
                        <div class="dingdan">优惠券<i class="icon-arrow"></i></div>
                    </li>
                    <li><a href="#"><i></i></a>
                        <div class="dingdan">我的资产<i class="icon-arrow"></i></div>
                    </li>
                    <li><a href="#"><i></i></a>
                        <div class="dingdan">我的足迹<i class="icon-arrow"></i></div>
                    </li>
                    <li><a href="#"><i></i></a>
                        <div class="dingdan">我的收藏<i class="icon-arrow"></i></div>
                    </li>
                    <li><a href="#"><i></i></a>
                        <div class="dingdan">邮箱订阅<i class="icon-arrow"></i></div>
                    </li>

                </ul>
            </div>
            <div class="side-buttom">
                <i class="ke"></i>
                <div id="center">客服中心<i class="icon-arrow"></i></div>

            </div>
            <a href="#chao">
                <div class="hdingbu">TOP</div>
            </a>
        </div>
    </div>


    <script>
        $(".abc").click(function () {
            $(".pb").css({
                "display": "block"
            })
        })


        $(".pb-hd i").click(function () {
            $(".pb").css({
                "display": "none"
            })
        })














        $('.side-buttom').hover(function () {
            $('#center').css({
                "visibility": "visible",
                "left": -92,
            })
        },
            function () {
                $('#center').css({
                    "left": -121,
                    "visibility": "hidden",
                })

            })


        $(".side-oul>li").each(function (index, ele) {
            $(ele).hover(function () {
                $($(ele).children().eq(1)).css({
                    "visibility": "visible",
                    "left": -92,
                })
            },
                function () {
                    $($(ele).children().eq(1)).css({
                        "left": -121,
                        "visibility": "hidden",
                    })
                })
        })
        $(".side-oul>div").each(function (index, ele) {
            $(ele).hover(function () {
                $($(ele).eq(0).eq(1)).css({
                    "visibility": "visible",
                    "left": -92,
                })
            },
                function () {
                    $($(ele).eq(0).eq(1)).css({
                        "left": -121,
                        "visibility": "hidden",
                    })
                })
        })
        // 回顶部
        $('.hdingbu').click(function () {
            $('html').animate({
                scrollTop: 0,
            }, 300)
        })
    </script>
</body>

</html>